import Head from 'next/head';
import RootPropTable from '../../../components/prop-tables/RootPropTable';
import ColumnOptionsTable from '../../../components/prop-tables/ColumnOptionsTable';
import StateOptionsTable from '../../../components/prop-tables/StateOptionsTable';
import Example from '../../../examples/enable-column-resizing';
import NoGrowExample from '../../../examples/enable-column-resizing-no-grow';

<Head>
  <title>Column Resizing Feature Guide - Material React Table V1 Docs</title>
  <meta
    name="description"
    content="How to use and customize the column resizing features of Material React Table"
  />
</Head>

## Column Resizing Feature Guide

Material React Table lets you easily change the default widths (sizes) of columns and has a built-in column resizing draggable handle feature.

> Upgrade to MRT v1.7.0 for big column resizing performance improvements!

### Relevant Props

<RootPropTable
  onlyProps={
    new Set([
      'columnResizeMode',
      'defaultColumn',
      'enableColumnResizing',
      'onColumnSizingChange',
      'onColumnSizingInfoChange',
    ])
  }
/>

### Relevant Column Options

<ColumnOptionsTable
  onlyProps={new Set(['enableResizing', 'maxSize', 'minSize', 'size'])}
/>

### Relevant State

<StateOptionsTable onlyProps={new Set(['columnSizing', 'columnSizingInfo'])} />

### Change Default Column Widths

#### Column Size

This was also covered in the [Data Columns Guide](/docs/guides/data-columns), but we'll cover it again here.

You can change the width of any column by setting its `size` option on the column definition. `minSize` and `maxSize` are also available to enforce limits during resizing.

```tsx
const columns = [
  {
    accessorKey: 'id',
    header: 'ID',
    size: 50, //small column
  },
  {
    accessorKey: 'username',
    header: 'Username',
    minSize: 100, //min size enforced during resizing
    maxSize: 400, //max size enforced during resizing
    size: 180, //medium column
  },
  {
    accessorKey: 'email',
    header: 'Email',
    size: 300, //large column
  },
];
```

You may notice, however, that the column sizes might not change as much as you would expect. This is because the browser treats `<th>` and `<td>` elements differently with in a `<table>` element by default.

You can improve this slightly by changing the table layout to `"fixed"` instead of the default `"auto"` in the `muiTableProps`. Though note that this only works if you are using the default `"semantic"` layout mode (and no virtualization features).

```tsx
<MaterialReactTable
  muiTableProps={{
    sx: {
      tableLayout: 'fixed',
    },
  }}
/>
```

The columns will still try to increase their width to take up the full width of the table, but the columns that do have a defined size will have their width respected more.

For further reading on how table-layout `fixed` vs `auto` works, we recommend reading this [blog post](https://css-tricks.com/almanac/properties/t/table-layout/) by CSS-Tricks.

If you are using either virtualization features or have the layoutMode set to `"grid"`, another option is to turn off flex grow for both the table head and body cells. [You can see this down below at the bottom of this page](#disable-column-growing)

#### Default Column

By default, columns will have the following size properties defined:

```tsx
defaultColumn = { minSize: 40, maxSize: 1000, size: 180 }; //units are in px
```

You can modify the default column widths by setting the `defaultColumn` prop on the table.

```tsx
<MaterialReactTable
  columns={columns}
  data={data}
  defaultColumn={{
    minSize: 20, //allow columns to get smaller than default
    maxSize: 9001, //allow columns to get larger than default
    size: 260, //make columns wider by default
  }}
/>
```

### Enable Column Resizing Feature

`enableColumnResizing` is the boolean prop that enables the column resizing feature.

```tsx
<MaterialReactTable columns={columns} data={data} enableColumnResizing />
```

You can disable specific columns from being resizable by setting the `enableResizing` column option to false in their respective column definition.

> When Column Resizing is enabled and the layoutMode is still set to the default `"semantic"` value, a CSS `table-layout: fixed` style is automatically added to the `<table>` element in order to make the browser respect the widths of the columns more.

#### Column Resize Mode

> The default columnResizeMode was changed to `"onChange"` in v1.7.0 instead of `"onEnd"` because most of the column resizing performance issues were fixed.

The default `columnResizeMode` is `onChange` (in MRT versions v1.7+), which means that the column resizing will occur immediately as the user drags the column resize handle. If you are running into performance issues because of many other enabled features, you might want to set the `columnResizeMode` to `onEnd` instead. This will make the column resizing only occur after the user has finished dragging the column resize handle and released their mouse.

```tsx
<MaterialReactTable
  columns={columns}
  data={data}
  enableColumnResizing
  columnResizeMode="onEnd" //instead of the default "onChange" mode
/>
```

<Example />

#### Disable Column Growing

> New in v1.7

If you want to prevent the columns from growing to fill the width of the table, use this flexbox trick when the layoutMode is `"grid"`:

```tsx
<MaterialReactTable
  columns={columns}
  data={data}
  enableColumnResizing
  layoutMode="grid" //instead of the default "semantic" layout mode
  muiTableHeadCellProps={{
    sx: {
      flex: '0 0 auto',
    },
  }}
  muiTableBodyCellProps={{
    sx: {
      flex: '0 0 auto',
    },
  }}
/>
```

<NoGrowExample />

View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-column-resizing-examples)**
